<template>
<div>
    <van-nav-bar title="个人信息" class="page-nav-bar" left-arrow  @click-left="$router.back()"></van-nav-bar>
    <input type="file" hidden ref="inputFile" @change="onChange" />
    <van-cell title="头像" is-link @click="$refs.inputFile.click()">
        <van-image width="25" height="25" round :src="user.photo" />
    </van-cell>
    <van-cell title="昵称" is-link @click="isShowUpdateName=true">{{user.name}}</van-cell>
    <van-cell title="性别" is-link @click="isShowUpdateGender=true">{{user.gender === 0 ?'女':'男'}}</van-cell>
    <van-cell title="生日" is-link @click="isShowUpdateBirthday=true">{{user.birthday}}</van-cell>

    <!-- 编辑昵称弹出层 -->
    <van-popup  v-model="isShowUpdateName" position="bottom" :style="{ height: '100%' }" >
      <update-name v-if="isShowUpdateName" @close="isShowUpdateName=false" :value="user.name" @update-name="updateName"></update-name>
    </van-popup>

    <!-- 编辑性别弹出层 -->
    <van-popup  v-model="isShowUpdateGender" position="bottom" >
      <update-gender v-if="isShowUpdateGender" @close="isShowUpdateGender=false" v-model="user.gender"></update-gender>
    </van-popup>

    <!-- 编辑生日弹出层 -->
    <van-popup  v-model="isShowUpdateBirthday" position="bottom" >
      <update-birthday v-model="user.birthday" v-if="isShowUpdateBirthday" @close="isShowUpdateBirthday=false" ></update-birthday>
    </van-popup>

    <!-- 头像弹出层 -->
    <van-popup  v-model="isShowUpdateAvatar" position="bottom" :style="{height:'100%'}">
      <update-avatar  v-if="isShowUpdateAvatar"  :img="img" @close="isShowUpdateAvatar=false"></update-avatar>
    </van-popup>
</div>
</template>

<script>
import UpdateAvatar from './components/update-avatar'
import UpdateBirthday from './components/update-birthday'
import UpdateGender from './components/update-gender'
import UpdateName from './components/update-name'
import { getUserProfile } from '@/api/user'
export default {
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdateAvatar
  },
  props: {},
  data () {
    return {
      user: {},
      isShowUpdateName: false,
      isShowUpdateGender: false,
      isShowUpdateBirthday: false,
      isShowUpdateAvatar: false,
      img: ''
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getUserProfile()
  },
  mounted () {},
  methods: {
    onChange () {
      console.dir(this.$refs.inputFile.files[0])
      var imgUrl = window.URL.createObjectURL(this.$refs.inputFile.files[0])
      console.log(imgUrl)
      this.isShowUpdateAvatar = true
      this.img = imgUrl
    },
    updateName (message) {
      this.user.name = message
      this.isShowUpdateName = false// 关闭弹出层
    },
    async getUserProfile () {
      try {
        const res = await getUserProfile()
        console.log(res)
        this.user = res.data.data
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped>

</style>
